import styled from 'styled-components'

interface ButtonProps {
  $round: string
  $type: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'dark'
  $disabled: boolean
  $size?: 'small' | 'medium' | 'large'
}

// 设置主题颜色
const theme = {
  primary: '#409eff',
  success: '#67c23a',
  warning: '#e6a23c',
  danger: '#f56c6c',
  info: '#909399',
  dark: '#303133'
}

export const LtButtonWrapper = styled.div<ButtonProps>`
  .lt_button {
    color: #fff;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: ${(props) => theme[props.$type]};
    border-radius: ${(props) => props.$round};
    ${(props) => props.$disabled && 'cursor: not-allowed;'}
    ${(props) => props.$disabled && 'opacity: 0.6;'}
    /* 正常按钮 */
    ${(props) => props.$size === 'medium' && 'padding: 5px 15px;'}
    ${(props) => props.$size === 'medium' && 'font-size: 14px;'}
    /* 大按钮 */
    ${(props) => props.$size === 'large' && 'padding: 10px 20px;'}
    ${(props) => props.$size === 'large' && 'font-size: 16px;'}
    /* 小按钮 */
    ${(props) => props.$size === 'small' && 'padding: 3px 10px;'}
    ${(props) => props.$size === 'small' && 'font-size: 12px;'}

    &:hover {
      opacity: 0.9;
    }

    .loading {
      animation: rotate 1s linear infinite;
      margin-right: 5px;
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`
